<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" :title="title" style="max-height: 86vh; width: 70vw;" append-to-body>
      <el-scrollbar max-height="65vh">
        <div class="ui_el_dialog_body">
          <el-form ref="form" :model="formData" :rules="rules" label-width="108px" class="dialog-form-two">
            <el-row>
              <el-col :span="24">
                <el-form-item label="父标题" prop="title">
                  <el-input disabled v-model="formData.pTitle"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="标题" prop="title">
                  <el-input v-model="formData.title"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-scrollbar>
      <template #footer>
        <div class="ui_el_dialog_footer">
          <el-button @click="close">取消</el-button>
          <el-button @click="save">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import treeUtil from '@/utils/tree.js';
import api from './api.js'

const { proxy } = getCurrentInstance();


const emit = defineEmits(['sub']);

const isEdit = ref(false);
const rules = {
  name: {
    required: true, message: '不能为空'
  }
};


const formDataInit = {
  id: null,
  pid: null,
  pTitle: null,
  title: null,
  content: null,
};

const openFlag = ref(false);
const form = ref();

const formData = reactive(formDataInit);

function reset() {
  Object.assign(formData, formDataInit);
}

function open(row, parentData) {
  openFlag.value = true;
  reset();
  if (row) {
    Object.assign(formData, row);
    isEdit.value = true;
  } else {
    isEdit.value = false;
  }
  if (parentData) {
    formData.pid = parentData.id;
    formData.pTitle = parentData.title;
  }
}

function close() {
  openFlag.value = false;
}

const title = computed(()=>{
  return isEdit.value ? '编辑': '增加';
})

function getParams() {
  return {...formData};

}

async function check() {
  return true;
}

/** 保存 */
async function save() {
  let checkResult = await check();
  if (!checkResult) {
    return false;
  }

  if (isEdit.value) {
    api.update(getParams()).then(response => {
      emit("sub");
      close();
    });
  } else {
    api.add(getParams()).then(response => {
      emit("sub");
      close();
    });
  }

}

onMounted(() => {
});

defineExpose({
  open
});
</script>

<style lang="scss">

</style>